<template>
	<view class="app">
		<view class="">
			<u-grid :border="false" @click="click" col="1">
				<u-grid-item>
					<view class="image-box"><image class="_img" :src="brandList.picUrl" mode=""></image></view>
					<view class="grid-text "><text class="grid-text-title">{{brandList.name}}</text></view>
				</u-grid-item>
			</u-grid>
			<view class="brand-text">
				{{brandList.desc}}
			</view>
			<view class="newProduct">
				<u-grid
				        :border="false"
						col="2"
				>
				    <u-grid-item
				            v-for="(baseListItem,baseListIndex) in newGoodsList"
				            :key="baseListIndex"
							@click="jump(baseListItem.id)"
				    >
				        <view class="image-box"><image class="_imgs"  :src="baseListItem.picUrl" mode=""></image></view>
				        <view class="newProduct-text ">
				        	<text class="newProduct-title">{{baseListItem.brief}}</text>
							<view class="newProduct-price">{{baseListItem.counterPrice}}元起</view>
				        </view>
				    </u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
		</view>
	</view>
</template>

<script>

export default {

	data() {
		return {
			brandList:[], //品牌商数组
			newGoodsList:[], //商品
		};
	},
	onLoad(option) {
		this.$get(this.API.brandDetail,{
			id:option.id
		}).then((res)=>{
		  this.brandList=res.data.data
		})
		
		
		this.$get(this.API.goodsList,{
			brandId:option.id
		}).then((res)=>{
			console.log(res)
          this.newGoodsList=res.data.data.list
			  	    
				  	
				  
		 })
	},
	
	methods:{
		//传id到详情
		jump(index){
			uni.navigateTo({
				url:'../../pages/productDetails/productDetails?id='+index
			})
			}
	}
};
</script>

<style lang="scss" scoped>
	.app{
		.image-box {
			height: 300rpx;
			._img {
				width: 100vw;
				height: 290rpx;
				opacity: 0.8;
			}
		}
		.grid-text {
			position: absolute;
			color: #ffffff;
			box-sizing: border-box;
			.grid-text-title {
				font-size: 30rpx;
			}
		}
		.brand-text{
			padding: 20rpx;
		}
		
		.newProduct{
			margin:50rpx;
			.image-box{
				height: 200rpx;
				._imgs{
					width:250rpx;
					height: 250rpx;
				
				}
			}
		.newProduct-text{
			margin: 10px;
			.newProduct-title{
				font-size: 20rpx;
			}
			.newProduct-price{
				font-size: 20rpx;
				color: #F56723;
				text-align: center;
			}
		}	
		}
	}


</style>
